<template>
  <div class="dingji">
    <!-- //结算 -->
    <!-- 头部 -->
    <div class="top1">
      <div class="dingdan">
        <span @click="$router.push('/goodShoping')"
          ><van-icon name="arrow-left"
        /></span>
        <span>确认订单</span>
        <span>登入|注册</span>
      </div>
    </div>
    <!-- 地址 -->
    <div class="dizhi" @click="$router.push(`/selectaddress`)">
      <div class="dizhi1">
        <span class="dizhi11111"
          ><van-icon name="location-o" class="dibiao" />
          <span class="dizhi111">{{ dizhi }}</span></span
        >

        <span> <van-icon name="arrow" /></span>
      </div>
    </div>
    <!-- 送达时间 -->
    <div class="baidi"></div>
    <div class="deliverytime">
      <div class="deliverytime1">
        <div class="df">
          <div class="timeleft"></div>
          <div class="sodamime">送达时间</div>
        </div>

        <div class="jinkuaimime">
          <p>尽快送达<span class="heng">|</span>预计 20：05</p>
          <div class="fengniao">蜂鸟专送</div>
        </div>
      </div>
    </div>
    <div class="baidi"></div>
    <!-- 支付方式 -->
    <div class="fangshi">
      <van-action-sheet v-model="show" title="支付方式">
        <div class="content">
          <div class="contenttop">
            <span class="daofu">货到货款(商家不支持到付款)</span
            ><span
              ><van-radio-group v-model="radio">
                <van-radio
                  :disabled="radio1"
                  name="1"
                  checked-color="#ee0a24"
                ></van-radio>
              </van-radio-group>
            </span>
          </div>
          <div class="contenttop1">
            <span class="daofu1">在线支付</span
            ><span
              ><van-radio-group v-model="radio">
                <van-radio name="1" checked-color="#4cd964"></van-radio>
              </van-radio-group>
            </span>
          </div>
        </div>
      </van-action-sheet>
      <div class="famgshi1" @click="showPopup">
        <span class="fangshi2">支付方式</span
        ><span class="fangshi3">在线支付 <van-icon name="arrow" /></span>
      </div>
      <div class="hbao">
        <span class="hbaolefr">红包</span
        ><span class="hbaor">暂时只在饿了么APP中支持</span>
      </div>
    </div>
    <div class="baidi"></div>
    <!-- 支付详情 -->
    <div class="zhifuxiangq">
      <ul>
        <li>
          <div class="imgda">
            <div class="img"><img src="../assets/bg.jpg" alt="" /></div>
            <span class="mingzhi">1111111</span>
          </div>
        </li>
        <!-- 便利的盒子 -->
        <li class="lis" v-for="(val, i) in cartshping" :key="i">
          <div class="ddd">
            <div class="ddd1">
              <span class="dddleft"
                >{{ val.name
                }}{{
                  val.specs.length == 0 ? "" : "-" + val.specs[0].value
                }}</span
              >
              <div class="y20">
                <span class="dddr">x {{ val.num }}</span>
                <span class="y20r">￥{{ val.price }}</span>
              </div>
            </div>
          </div>
        </li>
        <li class="lis">
          <div class="ddd">
            <div class="ddd1">
              <span class="dddleft">餐盒</span>
              <div class="y20">
                <span class="y20r">￥{{ cartshping.length }}</span>
              </div>
            </div>
          </div>
        </li>
        <li class="lis">
          <div class="ddd">
            <div class="ddd1">
              <span class="dddleft">配送费</span>
              <div class="y20">
                <span class="y20r">￥4</span>
              </div>
            </div>
          </div>
        </li>
        <li class="lis4">
          <div class="ddd">
            <div class="ddd1 ddd11">
              <span class="dddleft">订单 ￥{{ sum }}</span>
              <div class="y20">
                <span class="dddr dddr3"
                  >待支付 <span class="dddr1">￥{{ sum }} </span></span
                >
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="baidi"></div>
    <div class="fangshi">
      <div class="famgshi1" @click="bezhu">
        <span class="fangshi2">订单备注</span>
        <span class="connt">{{ connt }}</span
        ><span class="fangshi3"> <van-icon name="arrow" /></span>
      </div>
      <div class="hbao">
        <span class="hbaolefr">发票抬头</span
        ><span class="hbaor">不需要开发票</span>
      </div>
    </div>
    <!-- 底部确认下单 -->
    <div class="buy_car">
      <div class="content_left">
        <span>￥{{ sum }}</span>
      </div>
      <div class="content_right">
        <span @click="buyFn">确认下单</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      connt: localStorage.getItem("bezhu")
        ? localStorage.getItem("bezhu")
        : "如有需要请添加备注哟",
      radio1: true,
      radio: "1",
      show: false,
      dizhi: localStorage.getItem("xuanzhon")
        ? localStorage.getItem("xuanzhon")
        : "请添加一个收获地址",
      cartshping:
        this.$route.query.cartshping ||
        JSON.parse(localStorage.getItem("cartshping")), //上一个页面传过来的数组
      shopid:
        this.$route.query.shopid || JSON.parse(localStorage.getItem("shopid")), //商铺ID
    };
  },
  watch: {
    cartshping: {
      immediate: true, // 立即执行
      deep: true, // 深度侦听复杂类型内变化
      handler(newVal, oldVal) {
        localStorage.setItem("cartshping", JSON.stringify(this.cartshping));
      },
    },
    shopid: {
      immediate: true, // 立即执行
      deep: true, // 深度侦听复杂类型内变化
      handler(newVal, oldVal) {
        localStorage.setItem("shopid", JSON.stringify(this.shopid));
      },
    },
  },
  computed: {
    // 商铺已选择商品总价
    sum() {
      return (
        this.cartshping.length +
        4 +
        this.cartshping.reduce(function (sum, item) {
          return sum + item.price * item.num;
        }, 0)
      );
    },
  },
  methods: {
    bezhu() {
      localStorage.removeItem("bezhu");
      this.$router.push(`/remark`);
    },
    showPopup() {
      this.show = true;
    },
    // 点击确认下单
    buyFn() {
      let buyCart = JSON.parse(localStorage.getItem("buyCart"));
      buyCart[this.shopid] = {};
      localStorage.setItem("buyCart", JSON.stringify(buyCart));
      this.$nextTick(() => {
        this.cartshping = [];
        this.$toast("下单成功");
      });
    },
  },
};
</script>

<style lang="less" scoped>
.connt {
  color: #cdcccf;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.van-action-sheet__header {
  font-size: 26px;
  background-color: #fafafa;
  height: 80px;
  line-height: 80px;
}
.contenttop1 {
  margin-top: 60px;
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
  .daofu1 {
    font-size: 25px;
    color: #333333;
  }
}
.radio1 {
  color: #ffffff;
  background-color: #eeeeee;
}
.contenttop {
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
  .daofu {
    font-size: 25px;
    color: #cdcccf;
  }
}
.content {
  padding: 16px 16px 160px;
}

.dizhi11111 {
  width: 663px;
}
.dizhi111 {
  position: absolute;
  width: 75%;
  font-size: 21px;
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap;
}
.zhifuxiangq {
  background-color: #fff;
}

.lis {
  padding: 20px 0;
}
.lis4 {
  height: 80px;
}
.ddd {
  width: 100%;
  .ddd1 {
    padding: 0 25px;
    display: flex;
    justify-content: space-between;
    .y20r {
      margin-left: 50px;
      font-size: 16px;
      color: #666e84;
    }
    .dddleft {
      font-size: 16px;
      color: #686666;
    }
    .dddr3 {
      position: absolute;
      right: 50px;
      font-size: 16px;
    }
    .dddr {
      font-size: 16px;
      color: #ff662f;
      .dddr1 {
        display: block;
        font-size: 16px;
        margin-top: 30px;
      }
    }
  }
  .ddd11 {
    border-top: 1px solid #f5f5f5;
    padding-top: 10px;
  }
}
.imgda {
  padding: 0 15px;
  display: flex;
  border-bottom: 1px solid #eee;
  .mingzhi {
    height: 30px;
    line-height: 30px;
    margin-left: 20px;
    font-weight: 600;
    font-size: 20px;
  }
}
img {
  height: 60px;
  width: 55px;
}
.hbao {
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  background-color: #fff;
  .hbaolefr {
    color: #aaaab8;
    font-size: 14px;
  }
  .hbaor {
    color: #aaaab8;
    font-size: 14px;
  }
}
.famgshi1 {
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  .fangshi2 {
    color: #666666;
    font-size: 18px;
  }
  .fangshi3 {
    font-size: 14px;
    color: #cccccc;
  }
}
.df {
  display: flex;
  line-height: 90px;
}
.deliverytime1 {
  padding: 0 15px 0 0;
  justify-content: space-between;
  display: flex;
  height: 90px;
  background-color: #fff;
  .sodamime {
    margin-left: 20px;
    font-size: 20px;
    font-weight: 600;
  }
  .jinkuaimime {
    font-size: 16px;
    color: #3f93e8;
    position: absolute;
    .fengniao {
      position: relative;
      top: 0;
      left: 80px;
      color: #e5f1fc;
      height: 30px;
      border-radius: 7px;
      line-height: 30px;
      text-align: center;
      width: 95px;
      background-color: #3190e8;
    }
    .heng {
      margin: 0 15px;
    }
    position: relative;
    p {
      margin: 20px 0;
    }
  }
  .timeleft {
    width: 6px;
    height: 100%;
    background-color: #3190e8;
  }
}
.baidi {
  height: 10px;
  background-color: #f5f5f5;
}
.dizhi {
  background-color: #fff;
}
.dizhi1 {
  height: 100px;
  line-height: 100px;
  display: flex;
  justify-content: space-between;
  font-size: 30px;
  padding: 0 20px;
  background: url()
    0 100% repeat-x;
  .dibiao {
    margin-right: 10px;
    color: #3190e8;
    position: relative;
  }
}
.dingdan {
  height: 60px;
  background-color: #3190e8;
  display: flex;
  line-height: 60px;
  justify-content: space-between;
  padding: 0 15px;
  .van-icon {
    margin-top: 15px;
  }
  span,
  .van-icon {
    font-size: 18px;
    color: cornsilk;
  }
}
.buy_car {
  position: fixed;
  background-color: #3d3d3f;
  bottom: 0;
  left: 0;
  z-index: 13;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 48px;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .content_left {
    color: #fff;
    margin-left: 20px;
    span {
      margin-bottom: 8px;
    }
  }
  .content_right {
    background-color: #4cd964;
    height: 48px;
    width: 30%;
    line-height: 48px;
    text-align: center;
    span {
      color: #ffffff;
      font-weight: 700;
    }
  }
}
</style>